<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head >
<link>
    <meta name="format-detection" content="telphone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="description" content="首页-顶部">
    <meta name="robots" content="">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title></title>
    <link rel="stylesheet" href="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/css/nmt/reset.css">
    <!--<link rel="stylesheet" href="/css/pub/common.css" type="text/css"/>-->

    <script src="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/js/nmt/jquery.1.8.js"></script>
    <!-- 底部信息部分 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telphone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="description" content="首页-底部">
    <meta name="robots" content="">
    <title></title>
    <link rel="stylesheet" href="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/css/nmt/reset.css">
    <!--<link rel="stylesheet" th:href="@{/img/pub/common.css}" type="text/css" />-->
    <script th:src="@{/js/jquery/jquery-1.11.1.min.js}"></script>
    <script th:src="@{/js/jquery/jquery-ui.min.js}"></script>
    <script th:src="@{/js/util.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/mainsite/interface/interface.js}"></script>
    <script th:src="@{/js/mainsite/classify.js}"></script>

    <script src="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/js/nmt/jquery.1.8.js"></script>
    <!-- 底部信息部分 -->
    <meta name="format-detection" content="telphone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="description" content="首页-底部">
    <meta name="robots" content="">
    <title></title>
    <link rel="stylesheet" href="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/css/nmt/reset.css">
    <!--<link rel="stylesheet"  th:href="@{/css/index.css}" type="text/css" />-->

    <script src="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/js/nmt/jquery.1.8.js"></script>

    <style>
        .w{
            width: 1000px;
            margin: 0 auto;
        }
        .indexContain-top{
            margin-top: 40px;
        }
        .indexContain-top .picture-first{
            width: 490px;
            height: 490px;
        }
        .indexContain-top .picture-second{
            width: 235px;
            height: 235px;
        }
        .indexContain-top .picture-third{
            width: 490px;
            height: 235px;
        }
        .picture-ul li{
            float: left;
        }
        .indexContain-top .margin-right{
            margin-right: 20px;
        }
        .indexContain-top .margin-bottom{
            margin-bottom: 20px;
        }
        .indexContain-bottom .margin-right{
            margin-right: 100px;
        }
        .indexContain-bottom{
            margin: 50px 0 68px;
        }
        .indexContain-bottom .linear-gradient{
            display:block;
            width: 920px;
            height: 2px;
            margin: 0 auto;
            background:-webkit-linear-gradient(90deg,rgba(32,102,140,0.01) 0%,rgba(32,102,140,1) 50%,rgba(32,102,140,0) 100%);
            background: -moz-linear-gradient(90deg,rgba(32,102,140,0.01) 0%,rgba(32,102,140,1) 50%,rgba(32,102,140,0) 100%);
            background: -o-linear-gradient(90deg,rgba(32,102,140,0.01) 0%,rgba(32,102,140,1) 50%,rgba(32,102,140,0) 100%);
            background:linear-gradient(90deg,rgba(32,102,140,0.01) 0%,rgba(32,102,140,1) 50%,rgba(32,102,140,0) 100%);
        }
        .indexContain-bottom .more-contain{
            background-color: #F3F7FC;
            width: 100%;
        }
        .indexContain-bottom .more-title{
            width: 250px;
            height: 50px;
            color: #276B90;
            font-size: 26px;
            font-weight: 500;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
        }
        .indexContain-bottom .contain-li{
            width: 150px;
            height: 35px;
            float: left;
        }
        .indexContain-bottom .contain-li a{
            /* width: 150px;
            height: 28px; */
            color: #262D3F;
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }

        /* 元素居中 */
        .w{
            width: 1000px;
            margin: 0 auto;
        }
        .center{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        .header{
            width: 100%;
            height: 540px;
            background: url('../../img/logo01.png') no-repeat;
            background-size: 100% 100%;
            padding-top: 35px;
        }
        .header .header-top{
            height: 60px;
        }
        .header .icon-logo{
            width: 65px;
            height: 60px;
            background: url('../../img/logo02.png') no-repeat;
            background-size: 100% 100%;
        }
        .header .logoText{
            color: #2C7AA4;
            font-size: 36px;
            font-weight: normal;
            line-height: 60px;
            margin-right: 95px;
        }
        .header .link{
            font-size: 18px;
            font-weight: 400;
            padding: 5px 0;
            color: #fff;
            margin: 25px 32px 0 0;
            opacity: .5;
        }
        .header .header-top li{
            float: left;
        }
        .header .header-top .linking{
            border-bottom: 2px solid #fff;
            opacity: 1;
        }
        .header .login{
            width: 116px;
            height: 30px;
            border-radius: 15px;
            color: #01050D;
            background-color: #fff;
            font-size: 18px;
            font-weight: 300;
            text-align: center;
            line-height: 30px;
            margin:25px 0 0 135px;
        }

        .header .searchBox{
            width: 800px;
            height: 50px;
            margin: 230px auto 0;
            background-color: #fff;
            border-radius: 6px;
        }
        .header .select-type{
            position: relative;
        }
        .header .searchBox .search{
            width: 400px;
            height: 50px;
            color: #262D3F;
            font-size: 20px;
            background-color: transparent;
            line-height: 50px;
            padding-left: 15px;
        }
        .header .search::-webkit-input-placeholder{
            color: #697185;
            font-size: 20px;
        }
        .header .search:-ms-input-placeholder{
            color: #697185;
            font-size: 20px;
        }
        .header .search::-moz-placeholder{
            color: #697185;
            font-size: 20px;
        }
        .header .search:-moz-placeholder{
            color: #697185;
            font-size: 20px;
        }

        .header .searchBox .selectedText{
            height: 100%;
            color: #262D3F;
            font-size: 20px;
            line-height: 50px;
            padding: 0 12px 0 22px;
            border-left: 1px solid #C4C4C4;
        }
        .header .searchBox .icon-selected{
            width: 15px;
            height: 10px;
            margin: 20px 10px 0 0;
        }
        .header .icon-search{
            width: 50px;
            height: 50px;
            background: url('../../img/search01.png') no-repeat;
            background-size: 100% 100%;
        }
        .selectType-bottom{
            width: 100%;
            color: #262D3F;
            font-size: 20px;
            position: absolute;
            top: 48px;
            left: 0;
            background-color: #fff;
            padding: 5px 0;
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }
        .selectType-bottom li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            margin: 6px 0;
        }
        .header .selectType-bottom .selected{
            background-color: #C4C4C4;
            line-height: 30px;
        }

        .footer{
            width: 100%;
            height: 100px;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #24688E;
        }
        .footer .link-li{
            float: left;
        }
        .footer .link{
            color: #fff;
            font-size: 20px;
        }
        .footer .margin-right{
            margin-right: 60px;
        }

    </style>
</head>

<body>

    <div class="header">
        <ul class="header-top w">
            <li><img class="icon-logo" th:src="@{/img/logo02.png}" alt=""></li>
            <li><span class="logoText">天基卫星信息资源系统</span></li>
            <li><a href="" class="link linking">照片</a></li>
            <li><a href="" class="link">视频</a></li>
            <li><a href="" class="link">音频</a></li>
            <li><a href="/" class="login">退出</a></li>
        </ul>
        <ul class="searchBox clear">
            <li class="fl"><input type="text" placeholder="请输入关键字开始搜索" class="search"></li>
            <li class="fr"><button class="icon-search"></button>></li>
            <li class="fr">
                <div class="select-type clear">
                    <span class="selectedText fl">全部图片</span>
                    <img class="icon-selected fl" th:src="@{/img/arrow01.png}" alt="">
                    <ul class="selectType-bottom none">
                        <li>全部图片</li>
                        <li>照片</li>
                        <li>矢量</li>
                        <li>视频</li>
                        <li>音频</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            //类名linking控制“照片 视频 音频”当前的选中状态
            //类名selected控制搜索左侧下拉菜单中悬浮元素的选中状态

            //点击头部搜索按钮左侧下拉菜单，达到切换其显示与隐藏的动态效果
            $('.select-type').on('click', function (event) {
                const this_bottom = $(this).find('.selectType-bottom');
                if ($(this_bottom).hasClass('none')) {
                    $(this_bottom).removeClass('none');
                } else {
                    $(this_bottom).addClass('none');
                }
                if (event.target.tagName === 'LI') {
                    const SELECTED_TEXT = $(event.target).text();
                    $('.selectedText').text(SELECTED_TEXT);
                }
            })

            $('.selectType-bottom li').hover(function () {
                $(this).addClass('selected');
             }, function () {
                 $(this).removeClass('selected');
            })
        })

    </script>
    <!-- 底部信息部分-->
    <div class="footer">
        <div class="w">
            <ul class="link-ul center clear">
                <li class="link-li margin-right"><a href="" class="link">联系方式</a></li>
                <li class="link-li margin-right"><a href="" class="link">隐私协议</a></li>
                <li class="link-li"><a href="" class="link">使用条款</a></li>
            </ul>
        </div>
    </div>
    <!-- 底部信息部分-->
    <div class="indexContain">
        <div class="indexContain-top w">
            <ul class="picture-ul margin-bottom clear" id="pictures">
            </ul>
        </div>
        <div class="indexContain-bottom">
            <p class="more-title">更多分类浏览图库</p>
            <span class="more-contain">
                <span class="linear-gradient"></span>
                <div class="w" style="padding:30px 0;" id="classify">

                </div>
            </div>
        </div>

    </div>

</body>
<script th:inline="javascript" type="text/javascript">
   classify.getclassify();
   classify.getDetailByClassifyid();
</script>
</html>




